<template>
  <div>
    <n-spin :show="show" description="请稍候...">
      <n-card
        :bordered="false"
        class="proCard mt-4"
        size="small"
        :segmented="{ content: true }"
        :title="restaurantName ? restaurantName + '-复制套餐 #' + formValue.id : '复制套餐 #' + formValue.id"
      >
        <n-form
          ref="formRef"
          :model="formValue"
          :rules="rules"
          :label-placement="settingStore.isMobile ? 'top' : 'left'"
          :label-width="150"
          class="py-4"
        >
          <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
            <n-gi span="1">
              <n-form-item label="套餐名称_简体中文" path="goodsName_zh" :show-require-mark="true">
                <n-input placeholder="请输入套餐名称" v-model:value="nameLanguage.zh" @blur="translate('name','zh',nameLanguage.zh)" style="width: 400px"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="套餐名称_English" path="goodsName_en">
                <n-input placeholder="请输入套餐名称" v-model:value="nameLanguage.en" @blur="translate('name','en',nameLanguage.en)" style="width: 400px"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="套餐名称_日本语" path="goodsName_ja">
                <n-input placeholder="请输入套餐名称" v-model:value="nameLanguage.ja" style="width: 400px"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="促销语" path="introduction">
                <n-input type="textarea" placeholder="促销语" v-model:value="formValue.introduction" style="width: 400px"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="标签" path="labelIdsArr">
                <n-checkbox-group v-model:value="formValue.labelIdsArr">
                  <n-space>
                    <n-checkbox
                      v-for="item in labelsArr"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    />
                  </n-space>
                </n-checkbox-group>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="图集" path="images" :show-require-mark="true">
                <FileChooser :maxNumber="10" v-model:value="formValue.imagesArr" />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="套餐售价" path="price">
                <n-input-group>
                  <n-input-number placeholder="请输入套餐售价" :min="0" v-model:value="formValue.price" style="width: 100px" />
                  <n-input-group-label>JPY</n-input-group-label>
                </n-input-group>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="套餐原价" path="marketPrice">
                <n-input-group>
                  <n-input-number placeholder="请输入套餐原价" :min="0" v-model:value="formValue.marketPrice" style="width: 100px" />
                  <n-input-group-label>JPY</n-input-group-label>
                </n-input-group>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="单次最大可预定数" path="maxOrderNum">
                <n-input-group>
                  <n-input-number placeholder="请输入" :min="0" v-model:value="formValue.maxOrderNum" style="width: 100px" />
                  <n-input-group-label>单</n-input-group-label>
                </n-input-group>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="用餐停留时间" path="timeDuration" :show-require-mark="true">
                <n-radio-group v-model:value="formValue.timeDuration" name="timeDuration">
                  <n-radio-button
                    v-for="item in timeDurationArr"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </n-radio-group>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="套餐详情_简体中文" path="goodsContent_zh" :show-require-mark="true">
                <n-input type="textarea" placeholder="套餐详情" v-model:value="descriptionLanguage.zh" @blur="translate('description','zh',descriptionLanguage.zh)" style="width: 400px"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="套餐详情_English" path="goodsContent_en">
                <n-input type="textarea" placeholder="套餐详情" v-model:value="descriptionLanguage.en" @blur="translate('description','en',descriptionLanguage.en)" style="width: 400px"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="套餐详情_日本语" path="goodsContent_ja">
                <n-input type="textarea" placeholder="套餐详情" v-model:value="descriptionLanguage.ja" style="width: 400px"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="注意事项" path="notice">
                <n-input type="textarea" placeholder="注意事项" v-model:value="formValue.notice" style="width: 400px"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="状态" path="goodsState">
                <n-radio-group v-model:value="formValue.goodsState" name="goodsState">
                  <n-radio-button
                    :value="1"
                    label="立刻上架"
                  />
                  <n-radio-button
                    :value="2"
                    label="放入仓库"
                  />
                </n-radio-group>
              </n-form-item>
            </n-gi>
          </n-grid>
          <div style="text-align: center">
            <n-space justify="center">
              <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
                确定
              </n-button>
            </n-space>
          </div>
        </n-form>
      </n-card>
    </n-spin>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import { Edit, View } from '@/api/foodGoods';
import { State, newState, rules } from './model';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
import { useMessage } from 'naive-ui';
import {useRouter} from "vue-router";
import {useTabsViewStore} from "@/store/modules/tabsView";
import {List as labelList} from "@/api/foodLabel";
import {Text} from "@/api/translate";
import {jsontoobj} from "@/utils/smjcomm";
import {View as RestaurantView} from "@/api/foodRestaurant";

const restaurantName = ref('');
const show = ref(false);
const message = useMessage();
const settingStore = useProjectSettingStore();
const formValue = ref<State>(newState(null));
const formRef = ref<any>({});
const formBtnLoading = ref(false);
const router = useRouter();
const params = router.currentRoute.value.params;
const tabsViewStore = useTabsViewStore();
const nameLanguage = reactive({
  en: '',
  zh: '',
  ja: '',
  ko: '',
  zh_CN: '',
});
const descriptionLanguage = reactive({
  en: '',
  zh: '',
  ja: '',
  ko: '',
  zh_CN: '',
});
const labelsArr = ref([])
const timeDurationArr = reactive([
  {
    label: '无限制',
    value: 0
  },
  {
    label: '15分',
    value: 15
  },
  {
    label: '30分',
    value: 30
  },
  {
    label: '60分',
    value: 60
  },
  {
    label: '90分',
    value: 90
  },
  {
    label: '120分',
    value: 120
  },
])

function translate(type,lang,text){
  if(type == 'name'){
    if(lang == 'zh'){
      // 简体中文
      nameLanguage.zh_CN = ''
    }else if(lang == 'en'){
      // 韩语
      nameLanguage.ko = ''
    }
  }else if(type == 'description'){
    if(lang == 'zh'){
      // 简体中文
      descriptionLanguage.zh_CN = ''
    }else if(lang == 'en'){
      // 韩语
      descriptionLanguage.ko = ''
    }
  }
  if(text){
    if(lang == 'en'){
      text = text.toLowerCase()
    }
    Text({
      text: text
    }).then((_res) => {
      if(type == 'name'){
        if(lang == 'zh'){
          // 简体中文
          nameLanguage.zh_CN = _res.zh_CN
        }else if(lang == 'en'){
          // 韩语
          nameLanguage.ko = _res.ko
        }
      }else if(type == 'description'){
        if(lang == 'zh'){
          // 简体中文
          descriptionLanguage.zh_CN = _res.zh_CN
        }else if(lang == 'en'){
          // 韩语
          descriptionLanguage.ko = _res.ko
        }
      }
    }).catch((err) => {

    });
  }
}

function confirmForm(e) {
  e.preventDefault();
  formBtnLoading.value = true;
  formRef.value.validate((errors) => {
    if (!errors) {
      if(formValue.value.imagesArr.length <= 0){
        formBtnLoading.value = false;
        message.error('请上传图集');
        return false;
      }
      formValue.value.id = 0;
      formValue.value.labelIds = formValue.value.labelIdsArr.join(',')
      formValue.value.images = formValue.value.imagesArr.join(',')
      formValue.value.nameLanguage = nameLanguage
      formValue.value.descriptionLanguage = descriptionLanguage
      Edit(formValue.value).then((_res) => {
        message.success('操作成功');
        formBtnLoading.value = false;
        // todo 关闭当前tab页，并跳转到等级列表页
        setTimeout(() => {
          tabsViewStore.closeSignal('2');
          router.push({ name: 'foodGoodsIndex', params: { id: params.id } });
        }, 500);
      }).catch((err) => {
        formBtnLoading.value = false;
      });
    } else {
      formBtnLoading.value = false;
      message.error('请填写完整信息');
    }
  });
}

async function loadLabelList(){
  const labelsArrList = await labelList({
    type: 2,
    status: 1,
    Pagination: false
  })
  labelsArr.value = labelsArrList.list
}

async function load(id) {
  const detailRes = await View({
    id: id,
    isLanguage: true
  })
  formValue.value = detailRes
  formValue.value.labelIdsArr = detailRes.labelIds ? detailRes.labelIds.split(',').map((item)=>{
    return parseInt(item)
  }) : [];
  formValue.value.imagesArr = detailRes.images ? detailRes.images.split(',').map((item)=>{
    return item
  }) : [];
  formValue.value.timeDuration = detailRes.timeDuration ? parseInt(detailRes.timeDuration) : 0

  if(detailRes.nameLanguage){
    const nameLanguageObj = jsontoobj(detailRes.nameLanguage);
    nameLanguage.zh = nameLanguageObj.zh && nameLanguageObj.zh.content ? nameLanguageObj.zh.content : ''
    nameLanguage.en = nameLanguageObj.en && nameLanguageObj.en.content ? nameLanguageObj.en.content : ''
    nameLanguage.ko = nameLanguageObj.ko && nameLanguageObj.ko.content ? nameLanguageObj.ko.content : ''
    nameLanguage.ja = nameLanguageObj.ja && nameLanguageObj.ja.content ? nameLanguageObj.ja.content : ''
    if(nameLanguageObj.zh_CN){
      nameLanguage.zh_CN = nameLanguageObj.zh_CN.content ? nameLanguageObj.zh_CN.content : ''
    }else if(nameLanguageObj.zh_cn){
      nameLanguage.zh_CN = nameLanguageObj.zh_cn.content ? nameLanguageObj.zh_cn.content : ''
    }else{
      nameLanguage.zh_CN = ''
    }
  }
  if(detailRes.descriptionLanguage){
    const descriptionLanguageObj = jsontoobj(detailRes.descriptionLanguage);
    descriptionLanguage.zh = descriptionLanguageObj.zh && descriptionLanguageObj.zh.content ? descriptionLanguageObj.zh.content : ''
    descriptionLanguage.en = descriptionLanguageObj.en && descriptionLanguageObj.en.content ? descriptionLanguageObj.en.content : ''
    descriptionLanguage.ko = descriptionLanguageObj.ko && descriptionLanguageObj.ko.content ? descriptionLanguageObj.ko.content : ''
    descriptionLanguage.ja = descriptionLanguageObj.ja && descriptionLanguageObj.ja.content ? descriptionLanguageObj.ja.content : ''
    if(descriptionLanguageObj.zh_CN){
      descriptionLanguage.zh_CN = descriptionLanguageObj.zh_CN.content ? descriptionLanguageObj.zh_CN.content : ''
    }else if(descriptionLanguageObj.zh_cn){
      descriptionLanguage.zh_CN = descriptionLanguageObj.zh_cn.content ? descriptionLanguageObj.zh_cn.content : ''
    }else{
      descriptionLanguage.zh_CN = ''
    }
  }
}

async function loadRestaurantView(){
  let info = await RestaurantView({ id: params.id })
  restaurantName.value = info.name
}

onMounted(async() => {
  show.value = true;
  await loadLabelList()
  await loadRestaurantView()
  await load(params.goodsId);

  show.value = false;
});
</script>

<style lang="less"></style>


